<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <el-form-item label="颜色格式">
      <el-radio-group v-model="props.formItem.colorFormat" class="ml-4" @change="colorFormatChange">
        <el-radio label="hsl">hsl</el-radio>
        <el-radio label="hsv">hsv</el-radio>
        <el-radio label="hex">hex</el-radio>
        <el-radio label="rgb">rgb</el-radio>
      </el-radio-group>
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="是否透明度">
      <el-switch v-model="props.formItem.showAlpha" @change="showAlphaChange" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="预设颜色">
      <div class="flex gap-2" v-if="props.formItem.predefine">
        <el-color-picker
            v-model="props.formItem.predefine[index]"
            v-for="(item,index) in props.formItem.predefine"
            :key="index"
            :color-format="props.formItem.colorFormat"
            :show-alpha="props.formItem.showAlpha"
        />
      </div>
    </el-form-item>

    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="弹出窗类名">
    <el-input v-model="props.formItem.popperClass" placeholder="请输入" />
  </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="Color">
import FormRulesConfig from './FormRulesConfig.vue'
import { nextTick } from 'vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()

const showAlphaChange = async (showAlpha: boolean) => {
  if (showAlpha && props.formItem.colorFormat !== 'rgb') {
    props.formItem.colorFormat = 'rgb'
  }
  props.formItem.show = false
  await nextTick(() => {
    props.formItem.show = true
  })
}
const colorFormatChange = async (colorFormat: string) => {
  if (colorFormat === 'hex' && props.formItem.showAlpha) {
    props.formItem.showAlpha = false
  }
  props.formItem.show = false
  await nextTick(() => {
    props.formItem.show = true
  })
  // props.formItem.colorFormat = colorFormat
  // props.formItem.show = false
  // await nextTick(() => {
  //   props.formItem.show = true
  // })
}
</script>
